<template>
	<view>
		<view class="companyInfo">
			<view>
				企业号：{{userInfo.company_no}}
				部门：{{userInfo.department || '-'}}
			</view>
			<view>
				<view class="linkTxt" @click="quitLogin">退出</view>
			</view>
		</view>

		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">调查统计</view>
			</view>
			<view>
				<uni-calendar ref="calendar" :insert="false" @confirm="confirmCalendar"></uni-calendar>
				<button @click="openCalendar">{{nowDay}} 切换日期</button>
			</view>
			<view class="qiun-charts">
				<canvas v-if="pieData.length > 0" canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
				<view v-if="pieData.length === 0" class="noData">
					暂无数据
				</view>
			</view>
		</view>
		<view class="action-row">
			<download-excel class="export-excel-wrapper" :data="json_data" :fields="json_fields" name="staffStat.xls">
				<!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
				<el-button type="primary" size="small">数据导出</el-button>
				<!-- <navigator >数据导出</navigator> -->
			</download-excel>
			<text> | </text>
			<navigator :url="detailUrl">详细列表</navigator>
		</view>

		<view style="align-items: center;justify-content: center; display: flex;">
			<image class="qrcode" :src="ewm" mode="widthFix">				
			</image>
		</view>
		
		<view style="color: #999999; align-items: center;justify-content: center; display: flex;">
			<H5>企业二维码</H5>

		</view>
		<view style="color: #999999; align-items: center;justify-content: center; display: flex;">
			<H5>(扫码进入企业专属的员工打卡页)</H5>
		</view>
		<view class="action-row">
			<span @click="downloadCode()">点击下载二维码</span>
			<!-- <navigator :url="ewm" @click="downloadCode()>点击下载二维码</navigator> -->
		</view>
	</view>

</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import QR from '../../../common/qrcode.js';
	var _self;
	var canvaPie = null;
	const radioTxt = {
		1: '是',
		0: '否'
	};
	import moment from 'moment';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let nowDay = moment().format('YYYY-MM-DD');
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				username: uni.getStorageSync('username'), //二维码
				ewm: '', //二维码				
				//codeImg:codeIMG,//二维码下载

				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				adviceTxt: {
					1: '可以直接上班',
					2: '专家判断是否需要隔离',
					3: '居家或到当地指定地点隔离14天',
					4: '去定点发烧门诊就诊',
					5: '常规感冒治疗'
				},
				nowDay: nowDay,
				detailUrl: '../index?day=' + nowDay,
				pieData: [],
				json_data: [],
				json_fields: {
					'企业号': "company",
					'部门': "department",
					'工号': "jobnumber",
					'姓名': "name",
					'在过去的14天内，是否出过本地区': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否到过疫情高发区': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否与疫情高发区旅居人员接触': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'是否与疑似病例接触': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否经停疫情高发区': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否在外地乘坐公共交通工具（包括：火车，飞机，汽车等）': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'在过去的14天内，是否有发热，呼吸道症状等': {
						field: "questionA",
						//自定义回调函数
						callback: value => {
							return radioTxt[value];
						}
					},
					'筛查结果': {
						field: "advice",
						//自定义回调函数
						callback: value => {
							return this.adviceTxt[value];
						}
					},
					'其他情况说明': "extraInfo",
					'提交时间': {
						field: "createTime",
						//自定义回调函数
						callback: value => {
							return moment(value).format('YYYY-MM-DD HH:mm:ss');
						}
					}
				}
			}
		},
		computed: mapState(['hasLogin', 'userInfo']),
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(750);
			let ewmurl = location.href.replace('/manager/stat/stat', `/form/form?id=${this.userInfo.company_no}`)
			console.log(ewmurl);
			this.ewm = QR.createQrCodeImg(ewmurl, {
				size: 350
			});

		},
		methods: {
			...mapMutations(['logout']),
			openCalendar() {
				this.$refs.calendar.open();
			},
			downloadCode() {
				let imgData =this.ewm ;
				// console.log(imgData);
				this.downloadFile('ewm.png', imgData);
			},
			//下载
			downloadFile(fileName, content) {
				let aLink = document.createElement('a');
				let blob = this.base64ToBlob(content); //new Blob([content]);
                   // console.log(content);
				let evt = document.createEvent("HTMLEvents");
				evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
				aLink.download = fileName;
				// console.log(fileName);
				aLink.href = URL.createObjectURL(blob);
				// console.log(aLink.href );
				// aLink.dispatchEvent(evt);
				aLink.click()
			},
			//base64转blob
			base64ToBlob(code) {
				let parts = code.split(';base64,');
				let contentType = parts[0].split(':')[1];
				let raw = window.atob(parts[1]);
				let rawLength = raw.length;

				let uInt8Array = new Uint8Array(rawLength);

				for (let i = 0; i < rawLength; ++i) {
					uInt8Array[i] = raw.charCodeAt(i);
				};
				return new Blob([uInt8Array], {
					type: contentType
				})
				},
				confirmCalendar(e) {
						this.nowDay = e.fulldate;
						this.detailUrl = '../index?day=' + this.nowDay;
						this.getData();
						this.getExcelData();
					},
					getData() {
						uni.showLoading({
							title: '处理中...'
						})
						uniCloud.callFunction({
							name: 'company_collect_stat',
							data: {
								company: this.userInfo.company_no,
								day: this.nowDay
							}
						}).then((res) => {
							uni.hideLoading()
							const initData = [{'_id':1,'data':0},{'_id':2,'data':0},{'_id':3,'data':0},{'_id':4,'data':0},{'_id':5,'data':0}];
							let resData = res.result && res.result.data ? res.result.data : [];
							if (resData.length==0) {
								resData = initData;
							} else {
								const obj = {};
								initData.map(function(item){
									obj[item._id] = item;
								});
								resData.map(function(item){
									obj[item._id] = item;
								});
								resData = Object.keys(obj).map(function(k){
									return obj[k];
								});
							}
							this.pieData = resData;
							for (var i = 0, len = resData.length; i < len; i += 1) {
								resData[i].name = `${this.adviceTxt[resData[i]._id]}:${resData[i].data}人`;
							}
							console.log(resData);
							const chartData = {
								"series": resData
							};
							this.showPie("canvasPie", chartData);
						}).catch((err) => {
							console.log(err);
							uni.hideLoading()
							uni.showModal({
								content: `查询失败，错误信息为：${err.message}`,
								showCancel: false
							})
						})
					},
					getExcelData() {
						uniCloud.callFunction({
							name: 'company_collect_excel',
							data: {
								company: this.userInfo.company_no,
								day: this.nowDay
							}
						}).then((res) => {
							console.log(res)
							uni.hideLoading()
							if (res.result.status == 1) {
								this.json_data = res.result.excelData;
							}

						}).catch((err) => {
							console.log(err);
							uni.showModal({
								content: `查询失败，错误信息为：${err.message}`,
								showCancel: false
							})
						})
					},
					showPie(canvasId, chartData) {
						canvaPie = new uCharts({
							$this: _self,
							canvasId: canvasId,
							type: 'pie',
							fontSize: 11,
							legend: {
								show: true,
								float: 'center',
								padding: 5,
								lineHeight: 15,
								margin: 5,
								borderWidth: 1
							},
							background: '#FFFFFF',
							pixelRatio: _self.pixelRatio,
							series: chartData.series,
							animation: true,
							width: _self.cWidth * _self.pixelRatio,
							height: _self.cHeight * _self.pixelRatio,
							dataLabel: true,
							extra: {
								pie: {
									lableWidth: 15
								}
							},
						});
					},
					touchPie(e) {
						canvaPie.showToolTip(e, {
							format: function(item) {
								return item.name
							}
						});
					},
					quitLogin() {
						this.logout();
						uni.navigateTo({
							url: '../../user/login'
						});
					},
			},
			onShow() {
				console.log('用户信息：', this.userInfo);
				if (this.hasLogin) {
					this.getData();
					this.getExcelData();
				} else {
					this.quitLogin();
				}
			}
		}
</script>

<style>
	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 10rpx;
	}

	.action-row el-button {
		color: #007aff;
		padding: 0 10px;
		font-size: 30rpx;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
		font-size: 30rpx;
	}
	
	.action-row span {
		margin-bottom: 20px;
	}

	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.companyInfo {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.linkTxt {
		color: #007aff;
		display: inline;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 750upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 750upx;
		background-color: #FFFFFF;
	}

	.noData {
		color: #888888;
		text-align: center;
		font-size: 14px;
		line-height: 10;
	}

	.qrcode {
		width: 150px;
		height: 150px;
	}
</style>
